
import React from "react";
import './index.css';

class Content extends React.Component{
  state = {
    goodsDeatils: []
  }
  render(){
    return(
      <div className="page-container">
        <section className="pwdcxn">
            <div className="img-wraper">
              <img src={this.state.goodsDeatils.length>0
              && this.state.goodsDeatils[0]['imgSrc']
              } alt=""></img>
            </div>
            <div className="wrap">
              <h2>
              阿迪达斯阿迪达斯女士柔肤舒爽牛奶净润沐浴露 运动舒缓清新透凉 活力新生
              <div className="yx">
                <i className="iconfont icon-icon-test"></i>
              </div>
              </h2>
              <p className="price-wrap">
                <span className="price"><i>￥</i>15</span>
                <span className="market-price"><i>￥</i>23</span>
              </p>
            </div>
        </section>
        <ul className="pollen">
          <li>
            <i>免邮</i>
            <p>全场满99元包邮</p>
          </li>
          <li>
            <i>花粉</i>
            <p>购买最多可获得
              <span className="highlight">29</span>
              个花粉
            </p>
          </li>
        </ul>
        <ul className="asd">
          <li>
            商品评价
            <span className="ps">(暂无评价)</span>
          </li>
        </ul>
        <ul className="tag-list clearfix">
          <li className="active">商品信息</li>
          <li>购物说明</li>
        </ul>
        <section className="desc">
          <table>
            <tbody>
              <tr>
                <th>商品品牌</th>
                <td>丽得姿</td>
              </tr>
              <tr>
                <th>商品名称</th>
                <td>【补水保湿】丽得姿进口美蒂优氨基酸净肤面膜10片</td>
              </tr>
              <tr>
                <th>商品品牌</th>
                <td>丽得姿</td>
              </tr>
              <tr>
                <th>有效期</th>
                <td>3年</td>
              </tr>
              <tr>
                <th>规格</th>
                <td>10片</td>
              </tr>
              <tr>
                <th>特点描述</th>
                <td>补水保湿</td>
              </tr>
              <tr>
                <th>产地</th>
                <td>韩国</td>
              </tr>
              <tr>
                <th>货号</th>
                <td>1328436</td>
              </tr>
            </tbody>
          </table>
          <div className="click-to-detail">
            点击查看图文详情
          </div>
        </section>
        <div className="first-page">
        <a href="/">
          <i className="iconfont icon-shouye"></i>
        </a>
      </div>
      <div className="footer">
      <a href="/">
          <div className="cart-wrap">
            <i className="iconfont icon-taobaogouwuche_ios"></i>
            <span className="num"></span>
          </div>
        </a>
        <button className="btn-primary">加入购物车</button>
      </div>
      </div>
    )
  }
  componentDidMount() {
    fetch(' http://localhost:3000/details', {
      headers: {
        "Content-Type": "application/json"
      }
    })
    .then(response => {
      return response.json()
    }).then(res => {
      this.setState({
        goodsDeatils: res.goodsDeatils
      })
      console.log(res, this.state)
    })
  }
}
export default Content;
